<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
<form action="" method="POST">
  <input type="file" id="file">
  <img id="img" width="500px">
  <script src="./node_modules/_axios@0.20.0@axios/dist/axios.js"></script>
  <input type="submit" value="提交" onclick="sub(event)">
</form>
  <script>
    var f,fileChunkList = []
    const http = axios.create({
      baseURL: 'http://127.0.0.1:2233'
    })
    file.onchange = event => {
      f = event.target.files[0]
      console.log(f.name.split('.')[0]);
      const objUrl = URL.createObjectURL(f)
      img.src = objUrl
      img.onload = _ => {
        URL.revokeObjectURL(objUrl)
      }
      var cur = 0, size = 1024 * 1024 // 1M
      while (cur < f.size) {
        fileChunkList.push({
          file: f.slice(cur, cur + size),
          fieldname: f.name.split('.')[0] + '-' + Math.ceil(cur/size)
        })
        cur += size
      }
      console.log(fileChunkList);
    }
    function sub (ev) {
      ev.preventDefault()
      var param = new FormData(); // 创建form对象
      // param.append('file', f); // 将文件存入file下面
      fileChunkList.forEach((file,index) => {
        param.append(file.fieldname, file.file)
      })
      http.post('/upload', param, {
        headers: { 'Content-Type': 'multipart/form-data' }
      }).then(res => {
        console.log(res);
        // img.src = res.data.url
        return false
      })
    }
  </script>
</body>

</html>